<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        h2,ul,li,p{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #sidebar{
            width: 192px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }
        h2{
            height: 30px;
            line-height: 30px;
            background-color: #eee;
            font-size: 20px;
            text-align: center;
        }
        ul li{
            width: 180px;
            height: 150px;
            margin: 5px;
            overflow: hidden;
            position: relative;
        }
        .imgbox{
            width: 360px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .imgbox img{
            float: left;
        }
        .imgtitle{
            height: 40px;
            width: 100%;
            position: absolute;
            bottom: -20px;
            left: 0;
            font-size: 14px;
            /*background-color: chocolate;*/
            line-height: 20px;
            text-align: center;
            color: white;
        }
        p{
            height: 20px;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        p:last-child{
            top: 20px;
        }
        .aa p{
            background-color: #d96160;
        }
        .bb p{
            background-color: #134752;
        }
        .cc p{
            background-color: #2271af;
        }
    </style>
</head>
<body>
    <div id="sidebar">
        <h2>专辑推荐</h2>
        <ul>
            <li>
                <!--图片 文字-->
                <div class="imgbox">
                    <img src="images/1_1.jpg" alt=""><img src="images/1_2.jpg" alt="">
                </div>
                <div class="imgtitle aa">
                    <p>COCOON可可尼</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="images/2_1.jpg" alt=""><img src="images/2_2.jpg" alt="">
                </div>
                <div class="imgtitle bb">
                    <p>INSUN恩裳</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
            <li>
                <div class="imgbox ">
                    <img src="images/3_1.jpg" alt=""><img src="images/3_2.jpg" alt="">
                </div>
                <div class="imgtitle cc">
                    <p>JNBY江南布衣</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    $(function(){
        $('li').hover(function(){
            $(this).find('.imgbox').stop().animate({left:-180,},500);
            // 第一个p下去第二个上来
            $(this).find('p').eq(0).stop().animate({top:20});
            $(this).find('p').eq(1).stop().animate({top:0});
        },function(){
            $(this).find('.imgbox').stop().animate({left:0},500);
            $(this).find('p').eq(0).stop().animate({top:0});
            $(this).find('p').eq(1).stop().animate({top:20});
        })






    })
</script>